<template>
  <div>
    <div class="circular_menu">
      <div class="inner_circle">
        <i class="el-icon-s-goods"></i>
      </div>
      <a href="#" class="panel">
        <i class="el-icon-s-tools"></i>
      </a>
      <a href="#" class="panel">
        <i class="el-icon-user-solid"></i>
      </a>
      <a href="#" class="panel">
        <i class="el-icon-warning"></i>
      </a>
      <a href="#" class="panel">
        <i class="el-icon-question"></i>
      </a>
      <a href="#" class="panel">
        <i class="el-icon-info"></i>
      </a>
      <a href="#" class="panel" style="margin-left:-105px">
        <i class="el-icon-success" style="margin-left: -25px;"></i>
      </a>
    </div>
    <!-- 特使定义样式变量 -->
    <div class="styles">
      <div class="font">测试定义样式变量Less</div>
    </div>
    <!-- 测试ES6语法：class类和继承 -->
    <div class="class">
      <el-button @click="clickBtn">ES6-class</el-button>
    </div>
    <div class="box"></div>
  </div>
</template>

<script>
import EsTest from '@/utils/es6'

export default {
  name: 'RegesterPage',
  data () {
    return {
      name: '王五',
      age: 18,
      gender: '男',
      height: 178
    }
  },
  methods: {
    clickBtn () {
      const es = new EsTest(this.name, this.age, this.gender, this.height)
      console.log(es, 'es');
      es.say()
    }
  },
}
</script>

<style lang="less" scoped>
// 定义样式变量
@color: skyblue;

.font {
  color: @color;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: auto;
}

// 定义变量结束

body {
  margin: 0;
  background: pink;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circular_menu {
  position: relative;
  font-size: 18px;
  border-radius: 50%;
  // margin-top: 100px;
}

.inner_circle {
  content: '';
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4em;
  height: 4em;
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 1em rgba(0, 0, 0, .8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner_circle i {
  color: #fff;
  font-size: 1.3em;
}

.panel {
  background: rgba(0, 0, 0, .5);
  text-decoration: none;
  width: 11.7em;
  height: 10em;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  transform-origin: top center;
  transition: width 0.1s, height 0.1s, opacity 0.1s;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  backdrop-filter: blur(4px);
}

.panel:nth-child(1) {
  transform: translateX(-50%);
}

.panel:nth-child(1) i {
  transform: translateX(-50%);
}

.panel:nth-child(2) {
  transition-delay: 0.1s;
  transform: translateX(-50%) rotate(60deg);
}

.panel:nth-child(2) i {
  transform: translateX(-50%) rotate(-60deg);
}

.panel:nth-child(3) {
  transition-delay: 0.2s;
  transform: translateX(-50%) rotate(120deg);
}

.panel:nth-child(3) i {
  transform: translateX(-50%) rotate(-120deg);
}

.panel:nth-child(4) {
  transition-delay: 0.3s;
  transform: translateX(-50%) rotate(180deg);
}

.panel:nth-child(4) i {
  transform: translateX(-50%) rotate(-180deg);
}

.panel:nth-child(5) {
  transition-delay: 0.4s;
  transform: translateX(-50%) rotate(240deg);
}

.panel:nth-child(5) i {
  transform: translateX(-50%) rotate(-240deg);
}

.panel:nth-child(6) {
  transition-delay: 0.5s;
  transform: translateX(-50%) rotate(300deg);
}

.panel:nth-child(6) i {
  transform: translateX(-50%) rotate(-300deg);
}

.panel:hover {
  background: rgba(0, 0, 0, .8);
}

.panel i {
  font-size: 2.5em;
  position: absolute;
  top: 50%;
  left: 50%;
}

.panel {
  opacity: 0;
  width: 0;
  height: 0;
}

.circular_menu:hover .panel {
  opacity: 1;
  height: 10em;
  width: 11.7em;
}
</style>
